//LoaderPage1.qml
import QtQuick 2.12
import QtQuick.Controls 2.12
import QtQuick.Layouts 1.0

Rectangle {
    width: 600
    height: 400
    color: "white"
    property string lepText:"kevin test"

    GridLayout {
        anchors.rightMargin: 10
        anchors.bottomMargin: 10
        anchors.leftMargin: 10
        anchors.topMargin: 10
        anchors.fill: parent
        rows: 2
        columns: 2

        Text {
            id: element
            text: qsTr("ListModel")
            Layout.fillWidth: true
            transformOrigin: Item.Center
            verticalAlignment: Text.AlignVCenter
            horizontalAlignment: Text.AlignHCenter
            font.pixelSize: 12
        }

        Text {
            id: element1
            text: qsTr("C++Model")
            verticalAlignment: Text.AlignVCenter
            horizontalAlignment: Text.AlignHCenter
            Layout.fillWidth: true
            font.pixelSize: 12
        }

        Rectangle {
            id: listRect
            color: "green"
            Layout.fillHeight: true
            Layout.fillWidth: true
            Layout.rowSpan: 1
            Layout.columnSpan: 1

            ListView {
                id: listRouteView
                x: 0
                y: 0
                anchors.rightMargin: 5
                anchors.leftMargin: 5
                anchors.topMargin: 5
                anchors.bottomMargin: 5
                spacing: 5
                anchors.fill: parent
                orientation: ListView.Vertical//垂直列表
                clip: true
                ScrollBar.vertical: ScrollBar {
                    id: scrollBar
                }

                model: listRouteModel;
                focus: true
                delegate: tabDelegate
            }

            //Component
            Component {
                id: tabDelegate
                Rectangle {
                    Image{
                        id:icon
                        width:24
                        height:24
                        source:"qrc:/image/myMenu.svg"
                    }

                    width: 100; height: 25;
                    color: (listRouteView.currentIndex === index) ? "blue": "#BBBBBB"
                    //标题
                    Text {
                        width: parent.width - 3; height: 25;
                        anchors.left: icon.right;
                        anchors.leftMargin: 3;
                        anchors.top: parent.top
                        anchors.topMargin: 0
                        font.pixelSize: 16;
                        color: (listRouteView.currentIndex === index) ? "red" : lepColor
                        text: lepText
                        horizontalAlignment: Text.AlignLeft; //left
                        verticalAlignment: Text.AlignVCenter;//Center
                    }

                    MouseArea {
                        anchors.fill: parent
                        onClicked: {
                            listRouteView.currentIndex = index

                            console.log("clicked currentIndex================" + listRouteView.currentIndex)
                        }
                    }
                }
            }//end Component

        }

        Rectangle{
            Layout.fillHeight: true
            Layout.fillWidth: true

            Layout.preferredHeight: 219
            Layout.preferredWidth: 100
            ListView {
                id: viewFromC
                x: 0
                y: 0
                anchors.rightMargin: 5
                anchors.leftMargin: 5
                anchors.topMargin: 5
                anchors.bottomMargin: 5
                spacing: 5
                anchors.fill: parent
                orientation: ListView.Vertical
                clip: true
                ScrollBar.vertical: ScrollBar {
                    id: scrollBar1
                }

                model: {}
                focus: true
                delegate: tabDelegate
            }
        }
    }

    //菜单
    ListModel {
        id: listRouteModel
        ListElement {lepText: qsTr("标题0"); lepColor: "white"}
        ListElement {lepText: qsTr("标题1"); lepColor: "white"}
        ListElement {lepText: qsTr("标题2"); lepColor: "white"}
        ListElement {lepText: qsTr("标题3"); lepColor: "white"}
        ListElement {lepText: qsTr("标题4"); lepColor: "black"}
        ListElement {lepText: qsTr("标题5"); lepColor: "black"}
        ListElement {lepText: qsTr("标题6"); lepColor: "white"}
        ListElement {lepText: qsTr("标题7"); lepColor: "white"}
        ListElement {lepText: qsTr("标题8"); lepColor: "white"}
        ListElement {lepText: qsTr("标题9"); lepColor: "white"}
        ListElement {lepText: qsTr("标题10"); lepColor: "white"}
        ListElement {lepText: qsTr("标题11"); lepColor: "white"}
        ListElement {lepText: qsTr("标题12"); lepColor: "white"}
        ListElement {lepText: qsTr("标题13"); lepColor: "white"}
        ListElement {lepText: qsTr("标题14"); lepColor: "white"}
        ListElement {lepText: qsTr("标题15"); lepColor: "white"}
    }
}

/*##^##
Designer {
    D{i:4;anchors_height:320;anchors_width:100;anchors_x:0;anchors_y:0}D{i:1;anchors_height:392;anchors_width:341;anchors_x:47;anchors_y:8}
}
##^##*/
